<template>
    <div>
        <!--          面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >🏠</el-breadcrumb-item>
            <el-breadcrumb-item>设置健康测评表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片区域-->
        <el-card class="box-card">
            <el-container>
                    <el-aside width="500px">
                        <button @click="tianjiaziduan">+</button>
                        <el-table
                                :border="true"
                                :data="ziduan"
                                style="width: 100%">
                            <el-table-column
                                    prop="fieldName"
                                    label="健康表字段"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="操作"
                                    width="220">
                                <template slot-scope="scope">
                                    <el-button type="success" @click="bianjiziduan(scope.row.fieldName,scope.row.id)" icon="el-icon-edit"></el-button>
                                    <el-button type="primary" @click="xuanxiandefeng(scope.row.id)" icon="el-icon-edit-outline"></el-button>
                                    <el-button type="danger" @click="shangchu(scope.row.id)" icon="el-icon-delete"></el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-aside>
                    <el-main>
                        <button @click="dakaixinzeng">+</button>
                        <el-table
                                :border="true"
                                :data="fengxiang"
                                style="width: 100%">
                            <el-table-column
                                    prop="level"
                                    label="风险等级"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="tips"
                                    label="风险提示"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="scoreMin"
                                    label="最小值"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="scoreMax"
                                    label="最大值"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="操作"
                                    width="210">
                                <template slot-scope="scope">
                                    <el-button type="primary" @click="xiugaifengxian1(scope.row.id,scope.row.level,scope.row.scoreMin,scope.row.scoreMax,scope.row.tips)" icon="el-icon-edit"></el-button>
                                    <el-button type="danger" @click="shangchu2(scope.row.id)" icon="el-icon-delete"></el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-main>
                </el-container>

        </el-card>
<!--        //1新增字段-->
        <el-dialog
                title="新增字段"
                :visible.sync="Visible1"
                width="40%"
        >
            输入新字段:
            <el-input v-model="xinzenziduan"></el-input>
            <span slot="footer" class="dialog-footer">
    <el-button @click="Visible1 = false">取 消</el-button>
    <el-button type="success" @click="quedintianjiaziduan">确 定</el-button>
  </span>
        </el-dialog>
<!--        //2编辑字段-->
        <el-dialog
                title="编辑字段"
                :visible.sync="Visible2"
                width="40%"
        >
            <el-input v-model="xiugaiziduan"></el-input>
            <span slot="footer" class="dialog-footer">
    <el-button @click="Visible2 = false">取 消</el-button>
    <el-button type="success" @click="quedinxiugaiziduan">确 定</el-button>
  </span>
        </el-dialog>
<!--        //3选项及得分信息-->
        <el-dialog
                title="选项及得分信息"
                :visible.sync="Visible3"
                width="60%"
        >
            <button @click="tianjiaxuanxiang">+</button>
            <el-table
                    :border="true"
                    :data="xuanxianhedefen"
                    style="width: 100%">
                <el-table-column
                        prop="option"
                        label="选项"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="score"
                        label="得分"
                        width="145">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="xiugaixuanxian(scope.row.id,scope.row.fieldId,scope.row.option,scope.row.score)" icon="el-icon-edit"></el-button>
                        <el-button type="danger" @click="shangchuxuanxiang(scope.row.id,scope.row.fieldId)" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>

            </el-table>
            <span slot="footer" class="dialog-footer">
    <el-button @click="Visible3 = false">取 消</el-button>
    <el-button type="success" @click="Visible3 = false">确 定</el-button>
  </span>
        </el-dialog>
        <!--        4添加选项及得分-->
        <el-dialog
                title="添加选项和相应得分"
                :visible.sync="Visible4"
                width="40%"
        >
            <el-row> 输入选项:  <el-input v-model="xuanxian"></el-input></el-row>

            <el-row> 输入得分: <el-input v-model="defeng"></el-input></el-row>


            <span slot="footer" class="dialog-footer">
    <el-button @click="Visible4 = false">取 消</el-button>
    <el-button type="success" @click="quedintianjiaxuangxiang">确 定</el-button>
  </span>
        </el-dialog>
<!--        //5修改选项或者得分-->
        <el-dialog
                title="修改选项或者得分"
                :visible.sync="Visible5"
                width="40%"
        >
            <el-row> 选项:  <el-input v-model="potion1"></el-input></el-row>

            <el-row> 得分: <el-input v-model="score1"></el-input></el-row>
            <span slot="footer" class="dialog-footer">
    <el-button @click="Visible5 = false">取 消</el-button>
    <el-button type="success" @click="quedinxiugaixuanxian">确 定</el-button>
  </span>
        </el-dialog>
<!--        6增加风险等级对话框-->
        <el-dialog
                title="新增风险等级"
                :visible.sync="Visible6"
                width="40%"
        >

         <el-row>输入等级: <el-input v-model="xinzenfengxian"></el-input></el-row>
         <el-row>风险提示: <el-input v-model="tips"></el-input></el-row>
            <el-row>最小值:<el-input v-model="min"></el-input></el-row>
         <el-row>最大值:<el-input v-model="max"></el-input></el-row>
            <span slot="footer" class="dialog-footer">
    <el-button @click="Visible6= false">取 消</el-button>
    <el-button type="success" @click="quedintianjiafengxian">确 定</el-button>
  </span>
        </el-dialog>
<!--        7修改等级对话框-->
        <el-dialog
                title="修改风险等级"
                :visible.sync="Visible7"
                width="40%"
        >
            <el-row>风险等级:<el-input v-model="xiugaifengxian"></el-input></el-row>
            <el-row>风险提示:<el-input v-model="tips"></el-input></el-row>
            <el-row>最小值:<el-input v-model="xiugaimin"></el-input></el-row>
            <el-row>最大值:<el-input v-model="xiugaimax"></el-input></el-row>

            <span slot="footer" class="dialog-footer">
    <el-button @click="Visible7 = false">取 消</el-button>
    <el-button type="success" @click="quedinxiugaifengxian">确 定</el-button>
  </span>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "shezhibiao",
        data() {
            return {
                // 健康数据列表
                ziduan: [],
                // 用户查询数据列表
                //风险等级数据
                fengxiang: [],
                Visible1:false,
                Visible2:false,
                Visible3:false,
                Visible4:false,
                xinzenziduan:'',
                xiugaiziduan:'',
                xiugaiziduanid:0,
                xuanxianhedefen:[],
                xuanxian:'',
                defeng:'',
                faildid:0,
                Visible5:false,
                xuanxiangid:0,
                xuanxiangfiid:0,
                potion1:'',
                score1:'',
                Visible6:false,
                xinzenfengxian:'',
                max:'',
                min:'',
                Visible7:false,
                xiugaifengxian:'',
                xiugaimin:'',
                xiugaimax:'',
                fengxiangid:'',
                tips:'',
            }
        },
        created() {
            this.getuserlist1(),
                this.getuserlist3()
                // this.tableRowClassName(this.userlist)

        },
        methods:{
            //请求健康表字段
            async getuserlist1() {
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                const {data: res} = await this.$http.get('healthAssessment/listField')
                this.ziduan = res.data.data
                console.log(this.ziduan)
            },
            //点击按钮编辑字段，显示对话框
           async bianjiziduan(name,id){
               this.xiugaiziduan=name
               this.xiugaiziduanid=id
               this.Visible2=true
           },
            //确定编辑字段，对话框消失
            async quedinxiugaiziduan(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.put('healthAssessment/updateField',
                    { 'fieldName': this.xiugaiziduan,
                        'id': this.xiugaiziduanid
                    }
                )
                this.getuserlist1()
                this.xiugaiziduan=''
                this.xiugaiziduanid=0
                this.Visible2=false
            },
            //删除字段信息
           async shangchu(id){
                console.log( typeof id)
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.delete(`healthAssessment/field/${id}`)
                this.getuserlist1()
            },
            //点击健康表字段后的根据字段获取选项的请求
            // async getuserlist2() {
            //     const token = sessionStorage.getItem("token");
            //     this.$http.defaults.headers.common['Authorization'] = token;
            //     const {data: res} = await this.$http.get('healthAssessment/listOption')
            //     console.log(res.data)
            //     this.userlist = res.data.data
            //     this.filusers = this.userlist
            // },
            //风险等级请求
            //一上来获得风险信息
            async getuserlist3() {
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                const {data: res} = await this.$http.get('/riskLevel/list')
                console.log(res.data)
                this.fengxiang = res.data

            },
            //删除风险信息
            async  shangchu2(id){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.delete(`riskLevel/${id}`)
                this.getuserlist1()
            },
            //点击+，弹出对话框，显示添加字段的对话框
            tianjiaziduan(){
                this.Visible1=true
            },
            //输入了想要添加的字段后，点击确认的事件处理，这时发送请求，对话框消失
           async quedintianjiaziduan(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                 await this.$http.post('healthAssessment/insertField',
                         { 'fieldName': this.xinzenziduan}
                 )
               this.getuserlist1()
                this.Visible1=false
               this.xinzenziduan=''
            },
            //点击按钮，将要修改字段的选项和得分，此时用id发送请求获取信息，显示对话框
            async xuanxiandefeng(id){
                //把请求到的数据存到表里
                //这里的id是faildid
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                const {data: res}=await this.$http.get('healthAssessment/listOption',
                    { params:{
                            fieldId:id
                        }}
                )
                console.log(res)
              this.xuanxianhedefen=res.data.data
                this.faildid=id
                console.log(this.faildid)
                this.Visible3=true
            },
            //添加选项和得分窗口
            tianjiaxuanxiang(){
                this.Visible4=true
            },
            //确定添加选项得分事件
          async  quedintianjiaxuangxiang(){
              console.log(this.xuanxian)
              console.log(this.faildid)
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.post('healthAssessment/insertOption',
                    {  'fieldId': this.faildid,
                        'option': this.xuanxian,
                        'score': this.defeng
                    }
                )
                this.xuanxian=''
                this.defeng=0
              const {data: res}=await this.$http.get('healthAssessment/listOption',
                  { params:{
                          fieldId:this.faildid
                      }}
              )
              this.xuanxianhedefen=res.data.data
              this.Visible4=false
            },
            //删除选项及得分
           async shangchuxuanxiang(id,id2){

                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.delete(`healthAssessment/option/${id}`)
               //
                const {data: res}=await this.$http.get('healthAssessment/listOption',
                   { params:{
                           fieldId:id2
                       }}
               )
               this.xuanxianhedefen=res.data.data
            },
            //修改选项对话框
            xiugaixuanxian(id,id2,option,score){
                this.xuanxiangid=id
                this.xuanxiangfiid=id2
                this.potion1=option
                this.score1=score
                console.log(this.potion1)
                console.log(this.score1)
                this.Visible5=true
            },
            async quedinxiugaixuanxian(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.put('/healthAssessment/updateOption',
                    {
                        "fieldId": this.xuanxiangfiid,
                        "id":  this.xuanxiangid,
                        "option": this.potion1,
                        "score": this.score1
                    }
                )
                const {data: res}=await this.$http.get('healthAssessment/listOption',
                    { params:{
                            fieldId:this.xuanxiangfiid
                        }}
                )
                this.xuanxianhedefen=res.data.data
                this.Visible5=false
                this.potion1=''
                this.score1=''
            },
            dakaixinzeng(){
                this.Visible6=true
            },
         async quedintianjiafengxian(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.post('riskLevel',
                    {

                        "level": this.xinzenfengxian,
                        "scoreMax": this.max,
                        "tips": this.tips,
                        "scoreMin": this.min
                    }
                )
                this.getuserlist3()
                this.xinzenfengxian=''
                this.max=''
                this.min=''
                this.tips=''
                this.Visible6=false

            },
            xiugaifengxian1(id,level,min,max,tips){
                 this.xiugaifengxian=level
                this.xiugaimin=min
                this.xiugaimax=max
                this.fengxiangid=id
                this.tips=tips
                this.Visible7=true
            },
          async  quedinxiugaifengxian(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.put('riskLevel',
                    {
                        "id":  this.fengxiangid,
                        "level":  this.xiugaifengxian,
                        "scoreMax": this.xiugaimax,
                        "scoreMin":  this.xiugaimin,
                        "tips":  this.tips
                    }
                )
              this.getuserlist3()
              this.Visible7=false
            }
        }

    }
</script>

<style scoped>
    .el-breadcrumb{
        margin-bottom: 12px;

    }
    .el-card{
        box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    }
    .el-aside{
        padding-top: 21px;
    }
    .el-main{
        padding-left: 30px;
    }

</style>
